<template>
  <div class="ad-market-container">
    <!-- 页面标题和搜索区域 -->
    <div class="page-header">
      <div class="page-title">
        <h2>广告市场</h2>
        <span class="subtitle">浏览可投放的广告并选择合适的广告投放到您的设备</span>
      </div>
      <div class="search-area">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索广告标题"
          class="search-input"
          clearable
          @keyup.enter="handleSearch"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
          <template #append>
            <el-button @click="handleSearch">搜索</el-button>
          </template>
        </el-input>
      </div>
    </div>

    <!-- 筛选和排序区域 -->
    <el-card shadow="hover" class="filter-card">
      <div class="filter-section">
        <div class="filter-item">
          <span class="filter-label">广告类型：</span>
          <el-select v-model="filterType" placeholder="选择类型" clearable @change="handleFilter" style="width: 180px">
            <el-option label="全部" value="" />
            <el-option v-for="(label, value) in typeOptions" :key="value" :label="label" :value="value" />
          </el-select>
        </div>
        <div class="filter-item">
          <span class="filter-label">广告状态：</span>
          <el-select v-model="filterStatus" placeholder="选择状态" clearable @change="handleFilter" style="width: 180px">
            <el-option label="全部" value="" />
            <el-option label="已审核" value="1" />
            <el-option label="投放中" value="2" />
            <el-option label="已完成" value="3" />
          </el-select>
        </div>
        <div class="filter-item">
          <span class="filter-label">预算范围：</span>
          <el-select v-model="filterBudget" placeholder="选择预算" clearable @change="handleFilter" style="width: 180px">
            <el-option label="全部" value="" />
            <el-option label="1000以下" value="0-1000" />
            <el-option label="1000-5000" value="1000-5000" />
            <el-option label="5000-10000" value="5000-10000" />
            <el-option label="10000以上" value="10000-" />
          </el-select>
        </div>
        <div class="filter-item">
          <span class="filter-label">排序方式：</span>
          <el-select v-model="sortOption" placeholder="排序" @change="handleSort" style="width: 180px">
            <el-option label="最新发布" value="time_desc" />
            <el-option label="预算从高到低" value="budget_desc" />
            <el-option label="预算从低到高" value="budget_asc" />
            <el-option label="投放时间从近到远" value="start_desc" />
          </el-select>
        </div>
      </div>
    </el-card>

    <!-- 广告列表区域 -->
    <div class="ad-list" v-loading="loading">
      <el-empty description="暂无广告数据" v-if="adList.length === 0 && !loading" />
      
      <el-row :gutter="24">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="ad in adList" :key="ad.id">
          <el-card shadow="hover" class="ad-card" @click="viewAdDetail(ad)">
            <div class="ad-status" :class="getStatusClass(ad.status)">
              {{ getStatusText(ad.status) }}
            </div>
            
            <!-- 预览广告素材 -->
            <div class="ad-media">
              <div v-if="ad.type === 1" class="text-ad-preview">
                <i class="el-icon el-icon-document"></i>
                <span>文字广告</span>
              </div>
              
              <img v-else-if="ad.type === 2" :src="ad.advertising" class="ad-image-preview" />
              
              <div v-else-if="ad.type === 3" class="video-ad-preview">
                <img 
                  v-if="ad.advertising" 
                  :src="`${ad.advertising}?x-oss-process=video/snapshot,t_1000,f_jpg,w_200,h_120,m_fast`" 
                  class="video-thumbnail" 
                />
                <div class="play-icon">
                  <el-icon><VideoPlay /></el-icon>
                </div>
              </div>
              
              <div v-else class="no-media">无媒体内容</div>
            </div>
            
            <h3 class="ad-title">{{ ad.title }}</h3>
            
            <div class="ad-info">
              <div class="ad-type">
                <el-tag size="small" :type="getTagType(ad.type)">{{ typeOptions[ad.type] || '未知类型' }}</el-tag>
              </div>
              
              <div class="ad-budget">
                <el-icon><Money /></el-icon>
                预算: <span class="budget-amount">¥{{ ad.budget.toFixed(2) }}</span>
              </div>
              
              <div class="ad-period">
                <el-icon><Calendar /></el-icon>
                投放周期: 
                <div class="date-range">
                  <div>{{ formatDate(ad.startTime) }}</div>
                  <div>至</div>
                  <div>{{ formatDate(ad.endTime) }}</div>
                </div>
              </div>
            </div>
            
            <div class="ad-footer">
              <span class="ad-time">
                <el-icon><Clock /></el-icon>
                {{ formatDateTime(ad.createdTime) }}
              </span>
              <el-button type="primary" size="small" @click.stop="startNegotiation(ad)" class="negotiation-button">
                创建协商
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.current"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[12, 24, 36, 48]"
          :layout="'total, sizes, prev, pager, next, jumper'"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
        />
      </div>
    </div>

    <!-- 广告详情对话框 -->
    <el-dialog
      v-model="adDetailVisible"
      title="广告详情"
      width="700px"
      destroy-on-close
      top="5vh"
      class="ad-detail-dialog"
    >
      <div v-loading="detailLoading">
        <div v-if="currentAd.id" class="ad-detail">
          <div class="ad-detail-header">
            <div class="ad-detail-title">{{ currentAd.title }}</div>
            <div class="ad-detail-status" :class="getStatusClass(currentAd.status)">
              {{ getStatusText(currentAd.status) }}
            </div>
          </div>
          
          <!-- 广告媒体内容 -->
          <div class="ad-media-detail">
            <h4>广告素材</h4>
            <div class="media-container">
              <!-- 文字广告 -->
              <div v-if="currentAd.type === 1" class="text-ad">
                <div class="text-ad-label">
                  <i class="el-icon el-icon-document"></i>
                  文字广告
                </div>
              </div>
              
              <!-- 图片广告 -->
              <div v-else-if="currentAd.type === 2" class="image-ad">
                <el-image 
                  :src="currentAd.advertising" 
                  fit="contain"
                  :preview-src-list="[currentAd.advertising]"
                  class="ad-image"
                />
              </div>
              
              <!-- 视频广告 -->
              <div v-else-if="currentAd.type === 3" class="video-ad">
                <video 
                  class="ad-video" 
                  controls
                  :src="currentAd.advertising"
                >
                  您的浏览器不支持视频播放
                </video>
              </div>
              
              <div v-else class="no-media">
                无媒体内容
              </div>
            </div>
          </div>
          
          <el-divider />
          
          <el-descriptions :column="2" border size="large">
            <el-descriptions-item label="广告ID">{{ currentAd.id }}</el-descriptions-item>
            <el-descriptions-item label="广告主">{{ currentAd.advertiserName || '未知' }}</el-descriptions-item>
            <el-descriptions-item label="广告类型">
              <el-tag :type="getTagType(currentAd.type)">{{ typeOptions[currentAd.type] || '未知类型' }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="预算金额">
              <span class="budget-amount">¥{{ currentAd.budget.toFixed(2) }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="投放状态">
              <el-tag :type="getStatusType(currentAd.status)">{{ getStatusText(currentAd.status) }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="开始时间">{{ formatDateTime(currentAd.startTime) }}</el-descriptions-item>
            <el-descriptions-item label="结束时间">{{ formatDateTime(currentAd.endTime) }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ formatDateTime(currentAd.createdTime) }}</el-descriptions-item>
            <el-descriptions-item label="更新时间">{{ formatDateTime(currentAd.updatedTime) }}</el-descriptions-item>
            <el-descriptions-item label="广告内容" :span="2">
              <div class="ad-content" v-html="currentAd.content"></div>
            </el-descriptions-item>
          </el-descriptions>
          
          <div class="ad-detail-footer">
            <el-button type="primary" @click="startNegotiation(currentAd)" size="large">创建协商</el-button>
            <el-button @click="adDetailVisible = false" size="large">关闭</el-button>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 创建协商对话框 -->
    <el-dialog
      v-model="negotiationVisible"
      title="创建广告协商"
      width="600px"
      destroy-on-close
      class="negotiation-dialog"
    >
      <el-form :model="negotiationForm" :rules="negotiationRules" ref="negotiationFormRef" label-width="100px">
        <el-form-item label="广告标题" prop="adTitle">
          <el-input v-model="negotiationForm.adTitle" disabled />
        </el-form-item>
        
        <el-form-item label="广告类型">
          <el-tag :type="getTagType(negotiationForm.adType)">{{ typeOptions[negotiationForm.adType] || '未知类型' }}</el-tag>
        </el-form-item>
        
        <el-form-item label="选择设备" prop="deviceId">
          <el-select v-model="negotiationForm.deviceId" placeholder="请选择设备" filterable>
            <el-option
              v-for="device in deviceList"
              :key="device.id"
              :label="device.name"
              :value="device.id"
            >
              <div class="device-option">
                <span>{{ device.name }}</span>
                <span class="device-location">{{ device.location }}</span>
              </div>
            </el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="协商价格" prop="price">
          <el-input-number
            v-model="negotiationForm.price"
            :min="0.01"
            :precision="2"
            :step="100"
            style="width: 100%"
          />
        </el-form-item>
        
        <el-form-item label="播放时段" prop="timeSlots">
          <div v-for="(slot, index) in negotiationForm.timeSlots" :key="index" class="time-slot-item">
            <el-time-picker
              v-model="slot.startTime"
              format="HH:mm"
              placeholder="开始时间"
              style="width: 45%"
            />
            <span class="time-separator">至</span>
            <el-time-picker
              v-model="slot.endTime"
              format="HH:mm"
              placeholder="结束时间"
              style="width: 45%"
            />
            <el-button 
              v-if="index > 0" 
              type="danger" 
              circle 
              size="small" 
              @click="removeTimeSlot(index)" 
              class="remove-time-slot"
            >
              <el-icon><Delete /></el-icon>
            </el-button>
          </div>
          <div class="add-time-slot">
            <el-button type="primary" link @click="addTimeSlot">
              <el-icon><Plus /></el-icon>
              添加时段
            </el-button>
          </div>
        </el-form-item>
        
        <el-form-item label="协商内容" prop="content">
          <el-input
            v-model="negotiationForm.content"
            type="textarea"
            :rows="4"
            placeholder="请输入您对该广告的协商内容，包括投放需求、价格预期等..."
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="negotiationVisible = false" size="large">取消</el-button>
          <el-button type="primary" @click="submitNegotiation" :loading="submitLoading" size="large">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Search, Money, Calendar, Clock, Plus, Delete, VideoPlay } from '@element-plus/icons-vue';
import { getAdvertisementList, getAdvertisementDetail } from '@/api/advertisement';
import { getUserDevices, getDeviceList } from '@/api/device';
import { createNegotiation } from '@/api/negotiation';

// 状态变量
const loading = ref(false);
const detailLoading = ref(false);
const submitLoading = ref(false);
const searchKeyword = ref('');
const filterStatus = ref('');
const filterBudget = ref('');
const filterType = ref('');
const sortOption = ref('time_desc');
const adList = ref([]);
const deviceList = ref([]);

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 12,
  total: 0
});

// 广告类型选项 - 更新为正确的类型
const typeOptions = {
  1: '文字广告',
  2: '图片广告',
  3: '视频广告'
};

// 广告详情
const adDetailVisible = ref(false);
const currentAd = reactive({});

// 协商表单
const negotiationVisible = ref(false);
const negotiationFormRef = ref(null);
const negotiationForm = reactive({
  adId: null,
  adTitle: '', // 仅用于显示，不提交给后端
  adType: null, // 广告类型，用于显示
  deviceId: null, // 仅用于前端选择设备，后端不需要
  price: 0,
  timeSlots: [
    {
      startTime: '08:00',
      endTime: '20:00'
    }
  ],
  content: ''
});

// 表单验证规则
const negotiationRules = {
  adId: [
    { required: true, message: '广告ID不能为空', trigger: 'blur' }
  ],
  price: [
    { required: true, message: '价格不能为空', trigger: 'blur' },
    { type: 'number', min: 0.01, message: '价格必须大于0', trigger: 'blur' }
  ],
  timeSlots: [
    { required: true, message: '播放时段不能为空', trigger: 'change' }
  ],
  content: [
    { required: true, message: '协商内容不能为空', trigger: 'blur' },
    { min: 10, max: 500, message: '协商内容长度在10到500个字符之间', trigger: 'blur' }
  ]
};

// 初始化数据
onMounted(() => {
  fetchAdList();
  fetchUserDevices();
});

// 获取广告列表
const fetchAdList = async () => {
  loading.value = true;
  try {
    const params = {
      pageNum: pagination.current,
      pageSize: pagination.pageSize,
      keyword: searchKeyword.value,
      status: filterStatus.value,
      budget: filterBudget.value,
      type: filterType.value,
      sort: sortOption.value
    };
    
    const res = await getAdvertisementList(params);
    console.log("广告", res);
    if (res.data.code === 200) {
      adList.value = res.data.data.records || [];
      pagination.total = res.data.data.total || 0;
    } else {
      ElMessage.error(res.message || '获取广告列表失败');
    }
  } catch (error) {
    console.error('获取广告列表异常:', error);
    ElMessage.error('获取广告列表失败');
  } finally {
    loading.value = false;
  }
};

// 获取用户设备列表
const fetchUserDevices = async () => {
   const params = {
      pageNum: 1,
      pageSize: 100,
    };
  try {
    const res = await getDeviceList(params); // 获取最多100个设备
    console.info("设备", res);
    if (res.data.code === 200) {
      deviceList.value = res.data.data.records || [];
    } else {
      ElMessage.error(res.message || '获取设备列表失败');
    }
  } catch (error) {
    console.error('获取设备列表异常:', error);
    ElMessage.error('获取设备列表失败');
  }
};

// 查看广告详情
const viewAdDetail = async (ad) => {
  adDetailVisible.value = true;
  detailLoading.value = true;
  
  try {
    // 先显示列表中的数据
    Object.assign(currentAd, ad);
    
    // 然后获取详细信息
    const res = await getAdvertisementDetail(ad.id);
    console.log('获取广告详情:', res);
    if (res.data.code === 200) {
      Object.assign(currentAd, res.data.data);
    } else {
      ElMessage.error(res.message || '获取广告详情失败');
    }
  } catch (error) {
    console.error('获取广告详情异常:', error);
    ElMessage.error('获取广告详情失败');
  } finally {
    detailLoading.value = false;
  }
};

// 发起广告协商
const startNegotiation = (ad) => {
  if (deviceList.value.length === 0) {
    ElMessageBox.alert('您暂无可用设备，请先添加设备后再创建广告协商。', '提示', {
      confirmButtonText: '确定',
      type: 'warning'
    });
    return;
  }
  
  // 初始化协商表单
  negotiationForm.adId = ad.id;
  negotiationForm.adTitle = ad.title;
  negotiationForm.adType = ad.type; // 添加广告类型
  negotiationForm.deviceId = deviceList.value.length > 0 ? deviceList.value[0].id : null;
  negotiationForm.price = ad.budget; // 默认设置为广告预算
  negotiationForm.timeSlots = [
    {
      startTime: '08:00',
      endTime: '20:00'
    }
  ];
  negotiationForm.content = `我希望在我的设备上展示您的广告"${ad.title}"。我的设备位置优越，人流量大，非常适合您的广告投放。期待与您合作！`;
  
  negotiationVisible.value = true;
  adDetailVisible.value = false; // 关闭详情对话框
};

// 添加时间段
const addTimeSlot = () => {
  negotiationForm.timeSlots.push({
    startTime: '08:00',
    endTime: '20:00'
  });
};

// 移除时间段
const removeTimeSlot = (index) => {
  negotiationForm.timeSlots.splice(index, 1);
};

// 提交协商
const submitNegotiation = async () => {
  if (!negotiationFormRef.value) return;
  
  await negotiationFormRef.value.validate(async (valid) => {
    if (valid) {
      submitLoading.value = true;
      try {
         // 检查是否选择了设备
        if (!negotiationForm.deviceId) {
          ElMessage.warning('请选择设备');
          submitLoading.value = false;
          return;
        }
        // 准备要发送的数据
        const params = {
          adId: negotiationForm.adId,
          price: negotiationForm.price,
          deviceId: negotiationForm.deviceId, // 添加设备ID
          timeSlots: negotiationForm.timeSlots.map(slot => {
            // 如果时间是Date对象，转换为字符串格式 HH:MM
            const formatTimeString = (time) => {
              if (time instanceof Date) {
                return `${time.getHours().toString().padStart(2, '0')}:${time.getMinutes().toString().padStart(2, '0')}`;
              }
              return time;
            };
            
            return {
              startTime: formatTimeString(slot.startTime),
              endTime: formatTimeString(slot.endTime)
            };
          }),
          content: negotiationForm.content
        };
        
        const res = await createNegotiation(params);
        console.info("协商", res)
        if (res.data.code === 200) {
          ElMessage.success('协商创建成功！');
          negotiationVisible.value = false;
        } else {
          ElMessage.error(res.message || '创建协商失败');
        }
      } catch (error) {
        console.error('创建协商异常:', error);
        ElMessage.error('创建协商失败');
      } finally {
        submitLoading.value = false;
      }
    }
  });
};

// 获取标签类型
const getTagType = (type) => {
  switch (Number(type)) {
    case 1: return '';
    case 2: return 'success';
    case 3: return 'danger';
    default: return 'info';
  }
};

// 处理搜索
const handleSearch = () => {
  pagination.current = 1;
  fetchAdList();
};

// 处理筛选
const handleFilter = () => {
  pagination.current = 1;
  fetchAdList();
};

// 处理排序
const handleSort = () => {
  fetchAdList();
};

// 处理分页大小变更
const handleSizeChange = (size) => {
  pagination.pageSize = size;
  fetchAdList();
};

// 处理分页页码变更
const handleCurrentChange = (page) => {
  pagination.current = page;
  fetchAdList();
};

// 获取状态样式类
const getStatusClass = (status) => {
  switch (Number(status)) {
    case 1: return 'status-approved';
    case 2: return 'status-running';
    case 3: return 'status-completed';
    case 0: return 'status-pending';
    case 4: return 'status-rejected';
    default: return '';
  }
};

// 获取状态文本
const getStatusText = (status) => {
  switch (Number(status)) {
    case 0: return '待审核';
    case 1: return '已审核';
    case 2: return '投放中';
    case 3: return '已完成';
    case 4: return '已拒绝';
    default: return '未知状态';
  }
};

// 获取状态标签类型
const getStatusType = (status) => {
  switch (Number(status)) {
    case 0: return 'info';
    case 1: return 'success';
    case 2: return 'primary';
    case 3: return 'warning';
    case 4: return 'danger';
    default: return 'info';
  }
};

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '未知';
  const date = new Date(dateStr);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
};

// 格式化日期时间
const formatDateTime = (dateStr) => {
  if (!dateStr) return '未知';
  const date = new Date(dateStr);
  return date.toLocaleString();
};
</script>

<style scoped>
.ad-market-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 80px);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.page-title {
  display: flex;
  flex-direction: column;
}

.page-title h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
  font-weight: 600;
}

.subtitle {
  font-size: 14px;
  color: #909399;
  margin-top: 8px;
}

.search-area {
  width: 300px;
}

.search-input :deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #dcdfe6 inset;
}

.search-input :deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #409EFF inset;
}

.filter-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.filter-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 5px;
}

.filter-item {
  display: flex;
  align-items: center;
}

.filter-label {
  font-size: 14px;
  margin-right: 8px;
  white-space: nowrap;
  color: #606266;
  font-weight: 500;
}

.ad-list {
  margin-bottom: 20px;
}

.ad-card {
  height: 100%;
  margin-bottom: 24px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 8px;
  overflow: hidden;
}

.ad-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.ad-card:hover .ad-title {
  color: #409EFF;
}

.ad-status {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: white;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.status-approved {
  background-color: #67C23A;
}

.status-running {
  background-color: #409EFF;
}

.status-completed {
  background-color: #E6A23C;
}

.status-pending {
  background-color: #909399;
}

.status-rejected {
  background-color: #F56C6C;
}

/* 广告媒体预览样式 */
.ad-media {
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  border-radius: 6px;
  overflow: hidden;
  background-color: #f8f9fb;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
  position: relative;
}

.text-ad-preview,
.info-ad-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #606266;
  width: 100%;
  height: 100%;
}

.text-ad-preview i,
.info-ad-preview i {
  font-size: 32px;
  margin-bottom: 10px;
  color: #606266;
}

.ad-image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.ad-card:hover .ad-image-preview {
  transform: scale(1.05);
}

/* 视频广告预览样式 */
.video-ad-preview {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  overflow: hidden;
}

.video-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: all 0.3s;
}

.ad-card:hover .video-thumbnail {
  transform: scale(1.05);
  opacity: 0.6;
}

.play-icon {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(64, 158, 255, 0.8);
  color: #fff;
  z-index: 2;
  transition: all 0.3s;
}

.play-icon .el-icon {
  font-size: 24px;
}

.ad-card:hover .play-icon {
  transform: scale(1.1);
  background-color: rgba(64, 158, 255, 1);
  box-shadow: 0 0 15px rgba(64, 158, 255, 0.5);
}

.no-media {
  color: #909399;
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #f5f7fa;
}

.ad-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 12px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.5;
  height: 48px;
  transition: color 0.3s;
}

.ad-info {
  margin-bottom: 15px;
}

.ad-type {
  margin-bottom: 12px;
}

.ad-budget, .ad-period {
  display: flex;
  align-items: flex-start;
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.ad-budget .el-icon, .ad-period .el-icon {
  margin-right: 5px;
  color: #909399;
  margin-top: 3px;
}

.date-range {
  display: flex;
  flex-direction: column;
  font-size: 13px;
}

.budget-amount {
  color: #f56c6c;
  font-weight: bold;
  margin-left: 4px;
}

.ad-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.ad-time {
  font-size: 12px;
  color: #909399;
  display: flex;
  align-items: center;
}

.ad-time .el-icon {
  margin-right: 4px;
}

.negotiation-button {
  transition: all 0.3s;
}

.negotiation-button:hover {
  transform: scale(1.05);
}

.pagination-container {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  padding: 10px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.ad-detail {
  padding: 15px;
}

.ad-detail-dialog :deep(.el-dialog__header) {
  padding: 20px;
  margin-right: 0;
  border-bottom: 1px solid #f0f0f0;
}

.ad-detail-dialog :deep(.el-dialog__body) {
  padding: 20px;
}

.ad-detail-dialog :deep(.el-dialog__footer) {
  padding: 20px;
  border-top: 1px solid #f0f0f0;
}

.ad-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.ad-detail-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.ad-detail-status {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  color: white;
  font-weight: 500;
}

/* 广告媒体详情样式 */
.ad-media-detail {
  margin-bottom: 25px;
}

.ad-media-detail h4 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  color: #303133;
  font-weight: 600;
}

.media-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 220px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f8f9fb;
  padding: 15px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.03);
}

.text-ad {
  text-align: center;
  padding: 30px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.text-ad-label {
  font-size: 16px;
  color: #606266;
  border: 1px dashed #ccc;
  padding: 20px 40px;
  border-radius: 8px;
  background-color: #fff;
  display: flex;
  align-items: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
}

.text-ad-label i {
  margin-right: 10px;
  font-size: 24px;
  color: #909399;
}

.image-ad {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 15px;
}

.ad-image {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.video-ad {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 15px;
}

.ad-video {
  max-width: 100%;
  max-height: 300px;
  border-radius: 4px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.ad-content {
  padding: 15px;
  background-color: #f8f9fb;
  border-radius: 8px;
  min-height: 100px;
  max-height: 200px;
  overflow-y: auto;
  line-height: 1.6;
  border: 1px solid #ebeef5;
}

.ad-detail-footer {
  margin-top: 25px;
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}

.negotiation-dialog :deep(.el-dialog__header) {
  padding: 20px;
  margin-right: 0;
  border-bottom: 1px solid #f0f0f0;
}

.negotiation-dialog :deep(.el-dialog__body) {
  padding: 25px 20px;
}

.negotiation-dialog :deep(.el-dialog__footer) {
  padding: 20px;
  border-top: 1px solid #f0f0f0;
}

.device-option {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 8px 0;
}

.device-location {
  color: #909399;
  font-size: 12px;
}

.time-slot-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  background-color: #f8f9fb;
  padding: 12px;
  border-radius: 8px;
  position: relative;
}

.time-separator {
  margin: 0 8px;
  color: #909399;
}

.remove-time-slot {
  position: absolute;
  right: -10px;
  top: -10px;
}

.add-time-slot {
  margin-top: 15px;
}

@media (max-width: 1200px) {
  .filter-section {
    flex-wrap: wrap;
    gap: 15px;
  }
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .search-area {
    width: 100%;
    margin-top: 15px;
  }
  
  .filter-section {
    flex-direction: column;
    gap: 15px;
  }
  
  .filter-item {
    width: 100%;
  }
  
  .ad-media {
    height: 140px;
  }
}
</style>